<script setup lang="ts">
const props = withDefaults(
  defineProps<{ bg?: "transparent" | "no-transparent" | "normal" }>(),
  { bg: "normal" }
);
const emit = defineEmits(["click"]);

const bgCss = computed(() => {
  switch (props.bg) {
    case "transparent":
      return "bg-transparent";
    case "no-transparent":
      return "bg-black";
  }
  return "bg-black/50";
});
</script>

<template>
  <div
    :class="`fixed ${bgCss} inset-0 z-[1000000]`"
    @click.self="emit('click')"
  >
    <slot></slot>
  </div>
</template>
